<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>轮播图</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }

      .banner {
        width: 600px;
        margin: auto;
        border: 10px solid greenyellow;
        height: 350px;
        position: relative;
        overflow: hidden;
      }

      .imgList {
        list-style: none;
        /* width: 2480px; */
        position: absolute;
        /* left:-620px; */
      }

      .imgList img {
        width: 600px;
        height: 350px;
      }

      .imgList li {
        float: left;
        margin-right: 20px;
      }

      .circle {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
      }

      .circle a {
        width: 15px;
        height: 15px;
        background: yellow;
        display: block;
        border-radius: 50%;
        opacity: 0.5;
        float: left;
        margin-right: 5px;
        cursor: pointer;
      }

      .circle a.hover {
        background: black;
        opacity: 0.8;
      }
    </style>
  </head>

  <body>
    <div class="banner">
      <ul class="imgList">
        <li><img src="./img/banner-霍格沃茨遗产.jpg" alt="" /></li>
        <li><img src="./img/banner-CS GO.jpg" alt="" /></li>
        <li><img src="./img/banner-失落方舟.jpg" alt="" /></li>
        <li><img src="./img/banner-正当防卫Ⅳ.jpg" alt="" /></li>
      </ul>
      <div class="circle">
        <!-- <a href=""></a> 
		<a href=""></a> 
		<a href=""></a> 
		<a href=""></a>  -->
      </div>
    </div>
    <script>
      //获取ul元素
      var imgList = document.querySelector(".imgList");
      //获取class名为circle的那个div（装下面小点的div）
      var circle = document.querySelector(".circle");
      //声明一个变量，用来存储Index的值
      var thisIndex = 0;
      //获取ul下的每一个li元素
      var imgListLi = imgList.children;
      //获取circle这个div下的每一个子元素
      var circleA = circle.children;
      //定义一个开关
      var flag = true;
      //将ul的宽度设置为其子元素li宽度的总和
      imgList.style.width = imgListLi.length * 620 + "px";

      //for循环给circle这个div下添加图片数量的a标签，并且设置class名
      for (var i = 0; i < imgListLi.length; i++) {
        var aNode = document.createElement("a"); //创建a标签元素
        aNode.setAttribute("index", i); //设置自定义属性
        if (i == 0) {
          aNode.className = "hover"; //添加class名
        }
        circle.appendChild(aNode); //将创建的a标签元素给到父元素circle
      }

      //给circle这个div设置点击事件
      circle.addEventListener("click", function (e) {
        //判断开关的状态
        if (flag) {
          flag = false; //如果开关是开的就关掉
          // console.log(e.target);
          //判断是否是a标签，注意：nodeName是大小
          if (e.target.nodeName != "A") {
            return false;
          }
          //重新给thisIndex赋值
          thisIndex = e.target.getAttribute("index");
          // imgList.style.left = -thisIndex * 620 + 'px';

          //调用下面封装好的slow方法
          //点击开关的状态是关闭的就给打开
          slow(imgList, -thisIndex * 620, function () {
            flag = true;
          });
          circleChange();
        }
      });
      //
      function antoChange() {
        setInterval(function () {
          if (flag) {
            flag = false;
            if (thisIndex >= circleA.length) {
              thisIndex = 0;
            }
            slow(imgList, -thisIndex * 620, function () {
              flag = true;
            });
            circleChange();
            thisIndex++;
          }
        }, 3000);
      }
      function circleChange() {
        for (var i = 0; i < circleA.length; i++) {
          circleA[i].className = "";
        }
        circleA[thisIndex].className = "hover";
      }
      function slow(obj, target, callback) {
        obj.myInter = setInterval(function () {
          var offsetLeft = obj.offsetLeft;
          var num = (target - offsetLeft) / 10;
          num > 0 ? (num = Math.ceil(num)) : (num = Math.floor(num));
          if (offsetLeft == target) {
            clearInterval(obj.myInter);
            callback && callback();
          } else {
            obj.style.left = offsetLeft + num + "px";
          }
        }, 10);
      }
      antoChange();
    </script>
  </body>
</html>
